<template>
  <div class="bigBox">
    <!-- 登录框 -->
 <div class="loginState">
  <!-- 头像 -->
  <img src="http://likede2-admin.itheima.net/img/logo.595745bd.png" alt="" class="loginImg">
  <!-- form表单 -->
    <el-form ref="form" :model="form"  :rules="rules">
      <el-form-item prop="loginName">
        <el-input v-model="form.loginName" validate-event
        placeholder="请输入账号" prefix-icon="el-icon-mobile-phone" maxlength="18"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="form.password" validate-event type="password" @input="changePassFn"
     placeholder="请输入密码"  show-password prefix-icon="el-icon-lock" maxlength="20"></el-input>
  </el-form-item>
  <el-form-item class="special" prop="code">
    <el-input v-model="form.code" placeholder="请输入验证码" maxlength="4" @input="changePassFn"
    prefix-icon="el-icon-document-checked"></el-input>
    <span class="veriFicationCode" @click="SwitchFn"><img :src="this.Img" alt="" /></span>
  </el-form-item>
  <el-button type="primary" @click.native="LoginRequestFn">登录</el-button>
    </el-form>
 </div>

  </div>
</template>

<script>
import { UserVerificationRequest } from '@/api/User'
import { v4 as uuidv4 } from 'uuid'
export default {
  data () {
    return {
      form: {
        loginName: '',
        password: '',
        code: '',
        clientToken: null,
        loginType: 0
      },
      // 验证码图片
      Img: null,
      // 效验账号密码
      rules: {
        loginName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { message: '长度在 1 到 18 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[a-z,A-Z,0-9]{1,20}$/, message: '长度在 1 到 20 个字母数字所组成的密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '长度在 1 到 4 个字符的验证码', trigger: 'blur' }
        ]
      }
    }
  },
  async created () {
    // 获取随机数
    this.sjFn()
    // 获取验证码
    this.VerificationRequestFn()
  },
  methods: {
    LoginRequestFn () {
      this.$store.dispatch('user/AcLoginRequestFn', this.form)
    },
    // 获取验证码
    async VerificationRequestFn () {
      const res = await UserVerificationRequest(this.form.clientToken)
      this.Img = res.request.responseURL
    },
    // 获取随机数
    sjFn () {
      this.form.clientToken = uuidv4().replace(/-/g, '')
    },
    // 切换验证码
    SwitchFn () {
      this.sjFn()
      this.VerificationRequestFn()
    },
    // 限制密码,验证码输入中文
    changePassFn () {
      this.form.password = this.form.password.replace(/[^\w./]/ig, '')
    }
  }
}
</script>
<style lang="less" scoped>
.bigBox{
    /*设置背景图片*/
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url('http://likede2-admin.itheima.net/img/background.be4fae7d.png');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 999;
    .loginState{
      position: absolute;
    width: 450px;
    height: 320px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 35px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    border-radius: 10px;
    .loginImg{
      position: absolute;
    width: 96px;
    height: 96px;
    top: -46px;
    left: 51%;
    margin-left: -48px;
    }
    }
    .el-form{
      height: 43px;
      /deep/ .el-input__inner{
        height: 52px;
      }
      .el-form-item{
        margin-bottom:35px;
      }
      .el-button{
        width: 100%;
    height: 52px;
    background: linear-gradient(262deg,#2e50e1,#6878f0);
    opacity: .91;
    border-radius: 8px;
    color: #fff;
    text-shadow: 0 7px 22px #cfcfcf;
      }
    }
    /deep/ .el-input__icon{
            line-height: 52px;
        }
        .special{
          display:flex;
          /deep/ .el-form-item__content{
            background-color: pink;
            height: 40px;
              display: inline-block;
            width: 71%;
          }
        }
        /deep/ .el-form-item__error{
          line-height: 36px;
        }
        .veriFicationCode{
          position: absolute;
        }
}
</style>
